<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于 - Vault MySQL高并发服务</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        .hero-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 3rem 0;
        }
        .tech-card {
            transition: transform 0.3s ease;
            border: none;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            height: 100%;
        }
        .tech-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
        }
        .feature-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(45deg, #007bff, #0056b3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
            margin: 0 auto 1rem;
        }
        .architecture-diagram {
            background: #f8f9fa;
            border: 2px dashed #dee2e6;
            border-radius: 10px;
            padding: 2rem;
            text-align: center;
        }
        .code-block {
            background: #2d3748;
            color: #e2e8f0;
            border-radius: 8px;
            padding: 1rem;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="bi bi-shield-lock"></i>
                Vault MySQL服务
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/about">关于</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 英雄区域 -->
    <section class="hero-section">
        <div class="container text-center">
            <h1 class="display-4 mb-4">
                <i class="bi bi-info-circle"></i>
                关于项目
            </h1>
            <p class="lead mb-0">
                基于HashiCorp Vault的MySQL数据库凭证管理和高并发测试系统
            </p>
        </div>
    </section>

    <!-- 项目概述 -->
    <section class="py-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-auto">
                    <h2 class="text-center mb-5">
                        <i class="bi bi-file-text"></i>
                        项目概述
                    </h2>
                    <div class="card">
                        <div class="card-body">
                            <p class="lead">本项目是一个企业级的数据库管理和性能测试解决方案，专门设计用于管理大规模MySQL数据库集群的安全访问和性能监控。</p>
                            
                            <h5 class="mt-4 mb-3">核心特性</h5>
                            <ul class="list-unstyled">
                                <li class="mb-2">
                                    <i class="bi bi-check-circle text-success me-2"></i>
                                    <strong>安全凭证管理：</strong>集成HashiCorp Vault，实现数据库凭证的安全存储和动态管理
                                </li>
                                <li class="mb-2">
                                    <i class="bi bi-check-circle text-success me-2"></i>
                                    <strong>高并发测试：</strong>支持多数据库并发性能测试，实时监控和详细报告
                                </li>
                                <li class="mb-2">
                                    <i class="bi bi-check-circle text-success me-2"></i>
                                    <strong>连接池管理：</strong>基于HikariCP的高性能数据库连接池管理
                                </li>
                                <li class="mb-2">
                                    <i class="bi bi-check-circle text-success me-2"></i>
                                    <strong>RESTful API：</strong>完整的REST API接口，支持所有核心功能
                                </li>
                                <li class="mb-2">
                                    <i class="bi bi-check-circle text-success me-2"></i>
                                    <strong>Web界面：</strong>直观的Web管理界面，支持实时监控和操作
                                </li>
                                <li class="mb-2">
                                    <i class="bi bi-check-circle text-success me-2"></i>
                                    <strong>云原生：</strong>支持Docker容器化部署和Kubernetes编排
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 技术架构 -->
    <section class="py-5 bg-light">
        <div class="container">
            <h2 class="text-center mb-5">
                <i class="bi bi-diagram-3"></i>
                技术架构
            </h2>
            
            <!-- 架构图 -->
            <div class="row mb-5">
                <div class="col-lg-10 mx-auto">
                    <div class="architecture-diagram">
                        <h5 class="mb-4">系统架构图</h5>
                        <div class="row text-center">
                            <div class="col-md-3 mb-3">
                                <div class="border rounded p-3 bg-white">
                                    <i class="bi bi-globe display-6 text-primary"></i>
                                    <h6 class="mt-2">Web界面</h6>
                                    <small>Bootstrap + Thymeleaf</small>
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <div class="border rounded p-3 bg-white">
                                    <i class="bi bi-gear display-6 text-success"></i>
                                    <h6 class="mt-2">Spring Boot</h6>
                                    <small>应用服务层</small>
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <div class="border rounded p-3 bg-white">
                                    <i class="bi bi-shield-lock display-6 text-warning"></i>
                                    <h6 class="mt-2">HashiCorp Vault</h6>
                                    <small>凭证管理</small>
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <div class="border rounded p-3 bg-white">
                                    <i class="bi bi-database display-6 text-info"></i>
                                    <h6 class="mt-2">MySQL集群</h6>
                                    <small>数据存储</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 技术栈 -->
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="card tech-card">
                        <div class="card-body text-center">
                            <div class="feature-icon">
                                <i class="bi bi-cup-hot"></i>
                            </div>
                            <h5 class="card-title">后端技术</h5>
                            <ul class="list-unstyled text-start">
                                <li><i class="bi bi-check text-success me-2"></i>Spring Boot 2.7+</li>
                                <li><i class="bi bi-check text-success me-2"></i>Spring Data JPA</li>
                                <li><i class="bi bi-check text-success me-2"></i>HikariCP连接池</li>
                                <li><i class="bi bi-check text-success me-2"></i>Maven构建工具</li>
                                <li><i class="bi bi-check text-success me-2"></i>Java 11+</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card tech-card">
                        <div class="card-body text-center">
                            <div class="feature-icon">
                                <i class="bi bi-palette"></i>
                            </div>
                            <h5 class="card-title">前端技术</h5>
                            <ul class="list-unstyled text-start">
                                <li><i class="bi bi-check text-success me-2"></i>Bootstrap 5</li>
                                <li><i class="bi bi-check text-success me-2"></i>Thymeleaf模板</li>
                                <li><i class="bi bi-check text-success me-2"></i>Bootstrap Icons</li>
                                <li><i class="bi bi-check text-success me-2"></i>响应式设计</li>
                                <li><i class="bi bi-check text-success me-2"></i>JavaScript ES6+</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card tech-card">
                        <div class="card-body text-center">
                            <div class="feature-icon">
                                <i class="bi bi-cloud"></i>
                            </div>
                            <h5 class="card-title">基础设施</h5>
                            <ul class="list-unstyled text-start">
                                <li><i class="bi bi-check text-success me-2"></i>HashiCorp Vault</li>
                                <li><i class="bi bi-check text-success me-2"></i>MySQL 8.0+</li>
                                <li><i class="bi bi-check text-success me-2"></i>Docker容器</li>
                                <li><i class="bi bi-check text-success me-2"></i>Docker Compose</li>
                                <li><i class="bi bi-check text-success me-2"></i>Kubernetes支持</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- API文档 -->
    <section class="py-5">
        <div class="container">
            <h2 class="text-center mb-5">
                <i class="bi bi-code-slash"></i>
                API接口文档
            </h2>
            <div class="row">
                <div class="col-lg-10 mx-auto">
                    <div class="accordion" id="apiAccordion">
                        <!-- Vault API -->
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="vaultApiHeading">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#vaultApi">
                                    <i class="bi bi-shield-lock me-2"></i>
                                    Vault管理API
                                </button>
                            </h2>
                            <div id="vaultApi" class="accordion-collapse collapse show" data-bs-parent="#apiAccordion">
                                <div class="accordion-body">
                                    <div class="code-block">
GET  /api/vault/test-connection     # 测试Vault连接
GET  /api/vault/health             # 获取Vault健康状态
GET  /api/vault/credentials/{path} # 获取数据库凭证
POST /api/vault/credentials/{path} # 存储数据库凭证
DEL  /api/vault/credentials/{path} # 删除数据库凭证
GET  /api/vault/path-exists/{path} # 检查路径是否存在
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Database API -->
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="databaseApiHeading">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#databaseApi">
                                    <i class="bi bi-database me-2"></i>
                                    数据库管理API
                                </button>
                            </h2>
                            <div id="databaseApi" class="accordion-collapse collapse" data-bs-parent="#apiAccordion">
                                <div class="accordion-body">
                                    <div class="code-block">
GET  /api/databases                # 获取所有数据库配置
GET  /api/databases/page           # 分页获取数据库配置
GET  /api/databases/{id}           # 根据ID获取配置
GET  /api/databases/name/{name}    # 根据名称获取配置
POST /api/databases                # 创建数据库配置
PUT  /api/databases/{id}           # 更新数据库配置
DEL  /api/databases/{id}           # 删除数据库配置
POST /api/databases/{id}/test      # 测试数据库连接
GET  /api/databases/stats          # 获取统计信息
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Test API -->
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="testApiHeading">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#testApi">
                                    <i class="bi bi-speedometer2 me-2"></i>
                                    性能测试API
                                </button>
                            </h2>
                            <div id="testApi" class="accordion-collapse collapse" data-bs-parent="#apiAccordion">
                                <div class="accordion-body">
                                    <div class="code-block">
POST /api/tests/start              # 启动性能测试
POST /api/tests/{id}/stop          # 停止性能测试
GET  /api/tests/{id}/status        # 获取测试状态
GET  /api/tests/history            # 获取测试历史
GET  /api/tests/running            # 获取正在运行的测试
GET  /api/tests/stats              # 获取测试统计
POST /api/tests/simple             # 创建简单测试
DEL  /api/tests/cleanup            # 清理旧测试记录
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- System API -->
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="systemApiHeading">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#systemApi">
                                    <i class="bi bi-gear me-2"></i>
                                    系统管理API
                                </button>
                            </h2>
                            <div id="systemApi" class="accordion-collapse collapse" data-bs-parent="#apiAccordion">
                                <div class="accordion-body">
                                    <div class="code-block">
GET  /api/system/status            # 获取系统状态
GET  /api/system/info              # 获取系统信息
GET  /api/system/health            # 健康检查
POST /api/system/reinitialize      # 重新初始化系统
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 部署信息 -->
    <section class="py-5 bg-light">
        <div class="container">
            <h2 class="text-center mb-5">
                <i class="bi bi-cloud-upload"></i>
                部署说明
            </h2>
            <div class="row">
                <div class="col-lg-8 mx-auto">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title mb-4">
                                <i class="bi bi-docker"></i>
                                Docker部署
                            </h5>
                            <div class="code-block mb-4">
# 构建镜像
docker build -t vault-mysql-service .

# 运行容器
docker run -d -p 8080:8080 \
  -e VAULT_URL=http://vault:8200 \
  -e VAULT_TOKEN=your-vault-token \
  vault-mysql-service

# 使用Docker Compose
docker-compose up -d
                            </div>
                            
                            <h5 class="card-title mb-4">
                                <i class="bi bi-play-circle"></i>
                                本地运行
                            </h5>
                            <div class="code-block mb-4">
# 编译项目
mvn clean package

# 运行应用
java -jar target/vault-mysql-service-1.0.0.jar

# 或者直接运行
mvn spring-boot:run
                            </div>
                            
                            <h5 class="card-title mb-4">
                                <i class="bi bi-gear"></i>
                                环境配置
                            </h5>
                            <div class="code-block">
# 必需的环境变量
VAULT_URL=http://localhost:8200
VAULT_TOKEN=your-vault-token
SPRING_PROFILES_ACTIVE=prod

# 可选的环境变量
SERVER_PORT=8080
LOGGING_LEVEL_ROOT=INFO
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 版本信息 -->
    <section class="py-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 mx-auto text-center">
                    <h2 class="mb-4">
                        <i class="bi bi-info-square"></i>
                        版本信息
                    </h2>
                    <div class="card">
                        <div class="card-body">
                            <h4 class="text-primary">v1.0.0</h4>
                            <p class="text-muted mb-3">发布日期: 2024年1月</p>
                            <ul class="list-unstyled text-start">
                                <li class="mb-2">
                                    <i class="bi bi-plus-circle text-success me-2"></i>
                                    初始版本发布
                                </li>
                                <li class="mb-2">
                                    <i class="bi bi-plus-circle text-success me-2"></i>
                                    Vault集成和凭证管理
                                </li>
                                <li class="mb-2">
                                    <i class="bi bi-plus-circle text-success me-2"></i>
                                    MySQL连接池管理
                                </li>
                                <li class="mb-2">
                                    <i class="bi bi-plus-circle text-success me-2"></i>
                                    高并发性能测试
                                </li>
                                <li class="mb-2">
                                    <i class="bi bi-plus-circle text-success me-2"></i>
                                    Web管理界面
                                </li>
                                <li class="mb-2">
                                    <i class="bi bi-plus-circle text-success me-2"></i>
                                    Docker容器化支持
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-4">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h5>
                        <i class="bi bi-shield-lock"></i>
                        Vault MySQL高并发服务
                    </h5>
                    <p class="mb-0">基于Spring Boot和HashiCorp Vault的企业级数据库管理解决方案</p>
                </div>
                <div class="col-md-6 text-md-end">
                    <p class="mb-0">
                        版本 1.0.0 | 
                        <a href="/" class="text-light">返回首页</a>
                    </p>
                    <p class="mb-0">
                        <small>&copy; 2024 Vault MySQL Service. All rights reserved.</small>
                    </p>
                </div>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>